$(start);

function start(){
    console.log("start")
    // var socket = new WebSocket("ws://192.168.15.225:4444/");
    // var socket = new WebSocket("ws://10.215.102.140:4444/");
    // var socket = new WebSocket("ws://192.168.11.55:4444/");
    var socket = new WebSocket("ws://192.168.13.178:4444/");

    var glChart = echarts.init(document.getElementById('dis'));

    var disData = [];

    var preData = [null, null, null];

    var rotateX = 90;
    var rotateY = 90;
    var rotateZ = 150;

    var glOption = {
        grid3D: {
            axisLine: {
                lineStyle: { color: '#fff' }
            },
            axisPointer: {
                lineStyle: { color: '#fff' }
            },
            viewControl: {
                alpha : rotateX,
                beta : rotateY,
            }
        },
        xAxis3D: {
            splitLine:{
                show: true,
                color: 'rgba(255,255,255,30)',
            },
        },
        yAxis3D: {
            splitLine:{
                show: true,
                color: 'rgba(255,255,255,30)',
            },
        },
        zAxis3D: {
            splitLine:{
                show: true,
                color: 'rgba(255,255,255,30)',
            },
        },
        // dataset: {
        //     // dimensions: [
        //     //     'Income',
        //     //     'Life Expectancy',
        //     //     'Population',
        //     //     'Country',
        //     //     {name: 'Year', type: 'ordinal'}
        //     // ],
        //     source: disData,
        // },
        series: [
            {
                type: 'line3D',
                symbolSize: 10,
                data: disData,
                // encode: {
                //     x: 'Country',
                //     y: 'Life Expectancy',
                //     z: 'Income',
                //     tooltip: [0, 1, 2, 3, 4]
                // }
            }
        ] 
    };

    glChart.setOption(glOption);

    socket.onmessage = function(event){
        var AllData = JSON.parse(event.data);
        console.log(AllData);

        if(AllData.type == 1){
            window.location.reload();
        } else {

            if(preData[0] == null){
                preData[0] = AllData.x;
                preData[1] = AllData.y;
                preData[2] = AllData.z;
            }

            if(Math.abs(AllData.x - preData[0]) > 0.01 || Math.abs(AllData.y - preData[1]) > 0.01 || Math.abs(AllData.z - preData[2]) > 0.01){
                // disData.push([AllData.x, AllData.y, AllData.z]);
                disData.push([AllData.x, AllData.y, 0]);
                preData[0] = AllData.x;
                preData[1] = AllData.y;
                preData[2] = AllData.z;
                glChart.setOption(glOption);
            }
        }
    };

    socket.onclose = function(event){
        console.log("model socket close");
	};

	socket.onerror = function(event) { 

    };

    socket.onopen = function(event){
		console.log("socket open");
	};
}